<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<%@ include file="../common/header.jsp"%>
<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

	<div class="container " style="margin-top: 20px">
		<%@ include file="../common/top.jsp"%>
		<div class="row">
			<div class="col-sm-3">
				<c:set var="menu" value="chart" />
				<%@ include file="../common/menu.jsp"%>
			</div>
	        <div class="col-sm-9">
	            <div class="row">
	                <div class="col-sm-12">
	                    <h1 class="page-head-line">客户报表</h1>
	                </div>
	            </div>
	            <!-- 高级查询 -->
	            <form class="form-inline" id="searchForm" action="/chart/list.do" method="post">
	                <div class="form-group">
	                    <label>销售员:</label>
	                    <input type="text" class="form-control" name="keyword" style="width: 150px"
	                           value="${qo.keyword}" placeholder="请输入销售员姓名">
	                </div>
	                <div class="form-group">
	                    <label>时间:</label>
	                    <input type="text" class="form-control" name="beginDate" style="width: 150px"
	                           value='<fmt:formatDate value="${qo.beginDate}" pattern="yyyy-MM-dd"/>'
	                           placeholder="请输入开始时间">
	                    <input type="text" class="form-control" name="endDate" style="width: 150px"
	                           value='<fmt:formatDate value="${qo.endDate }" pattern="yyyy-MM-dd"/>'
	                           placeholder="请输入结束时间">
	                </div>
	                <div class="form-group">
	                    <label>分组类型:</label>
	                    <select class="form-control" name="groupType">
	                        <option value="seller.name">销售员</option>
	                        <option value="DATE_FORMAT(c.inputTime, '%Y')">年份</option>
	                        <option value="DATE_FORMAT(c.inputTime, '%Y-%m')">月份</option>
	                        <option value="DATE_FORMAT(c.inputTime, '%Y-%m-%d')">日期</option>
	                    </select>
	                    <script>
	                        $("#searchForm select[name='groupType']").val("${qo.groupType}");
	                    </script>
	                </div>
	                <button type="submit" class="btn btn-primary">
	                    <span class="glyphicon glyphicon-search"></span> 查询
	                </button>
	                <a role="button" class="btn btn-success barBtn">
	                    <span class="glyphicon glyphicon-film"></span> 柱状图
	                </a>
	                <a role="button" class="btn btn-success pieBtn">
	                    <span class="glyphicon glyphicon-film"></span> 饼状图
	                </a>
	            </form>
	
	            <table class="table table-striped table-hover" >
	                <tr>
	                    <th>编号</th>
	                    <th>分组类型</th>
	                    <th>客户数量</th>
	                </tr>
	                <c:forEach var="entity" items="${list}" varStatus="s">
						<tr>
							<td>${s.index+1+(pageInfo.pageNum-1)*pageInfo.pageSize}</td>
							<td>${entity.groupType}</td>
							<td>${entity.totalNumber}</td>
						</tr>
	                </c:forEach>
	            </table>
	        </div>
	    </div>
</div>

<!-- 显示报表 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- 报表图动态显示到模态框中 -->
        <div class="modal-content"></div>
    </div>
</div>

<script>
    $(function () {
        //日历插件
        $("#searchForm input[name='beginDate']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                maxDate: new Date() //最多选到今天
            });
        });
        $("#searchForm input[name='endDate']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                minDate: $("#searchForm input[name='beginDate']").val(),
                maxDate: new Date() //最多选到今天
            });
        });
        
        //显示柱状图
        $(".barBtn").click(function() {
        	var url = "/chart/queryBar.do";
        	//?keyword=${qo.keyword}&groupType=${qo.groupType}&beginDate=${qo.beginDate}&endDate=${qo.endDate}
        	showModal(url);
        });

        //显示饼状图
        $(".pieBtn").click(function() {
        	var url = "/chart/queryPie.do";
        	showModal(url);
        });
    });
    
    function showModal(url) {
    	//先清除模态框的缓存
        $("#chartModal").removeData("bs.modal");
        
        //再发送请求
        $("#chartModal").modal({
            remote: url
        });
    }
</script>
</body>
</html>